import React,{useState} from 'react'

export default function LayOut() {
    const [count,setCount] = useState(0)
    const [str,setStr] = useState("我是小明的朋友")
    const objname = {uname:"安徽"}
    const [obj,setObj] = useState(JSON.stringify(objname))
    const [arr,setArr] = useState([1,2,3,4,5])
    function setStatefun() {
        setCount(preCount=> preCount+1)
    }
    function setStatefun1() {
        setStr(str.split('').reverse().join(''))
    }
    function setStatefun2() {
        //浅拷贝
        // const newObj = {...JSON.parse(obj)}
        const newObj = Object.create(JSON.parse(obj))
        //lodashi原生js的封装库也是可以使用的
        newObj.uname = '哈哈'
        setObj(JSON.stringify(newObj))
    }
    function setStatefun3() {
        const newarr = [...arr]
        newarr[0] = 100
        console.log(newarr);
        setArr(newarr)
    }
    return (
        <div>
            <button onClick={setStatefun}>+</button>
            {count} <br/>
            <button onClick={setStatefun1}>反向</button>
            {str} <br/>
            <button onClick={setStatefun2}>改变对象</button>
            {JSON.parse(obj).uname} <br/>
            <button onClick={setStatefun3}>改变数组</button>
            {arr}
        </div>
    )
}
